@import '../../../themes/mixins/animations';

.component {
  bottom: 20px;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 2500;

  .icon {
    display: block;
    height: 24px;
    width: 24px;
    svg {
      height: 24px;
      width: 24px;
    }
  }

  .iconButton {
    cursor: pointer;
  }
}

.iconOn path:nth-of-type(2) {
  fill: var(--theme-loading-status-icons-on-color);
}
.iconOff path:nth-of-type(2) {
  fill: var(--theme-loading-status-icons-off-color);
}
.iconUnloaded,
.iconUnknown {
  &.syncing {
    path:nth-of-type(2) {
      fill: var(--theme-loading-status-icons-unloaded-syncing-color);
    }
  }
  &.loading {
    path:nth-of-type(2) {
      fill: var(--theme-loading-status-icons-unloaded-loading-color);
    }
  }
}
.iconUnknown {
  opacity: 0.3;
}

.disabled:hover {
  .bubble {
    display: none;
  }
}
.ellipsis {
  .bubble > div {
    padding-right: 20px;
    @include animated-ellipsis($width: 16px);
  }
}

.tooltip {
  display: flex;
  margin-right: 12px;
  &:last-child {
    margin-right: 0;
  }
}
